<template>
  <div>
    <h1 class="welcome" :style="{ color: color }">Welcome!</h1>
    <h1 class="title">
      {{ title }}
      <div class="border"></div>
    </h1>

    <h2 class="intro">
      {{ intro }}
    </h2>
  </div>
</template>

<script>
import "./index.less";
export default {
  data() {
    return {
      intro: "",
      title: "欢迎来到YX个人博客",
      color: "rgb(255,255,255)",
    };
  },
  methods: {
    //走马灯效果
    walking() {
      let str =
        "这是我的个人博客、会分享关于编程，开发以及其他方面的一些内容，希望可以对您有所帮助...";
      let idx = 0;
      let that = this;
      setTimeout(function fn() {
        that.intro = that.intro + str.substring(idx, idx + 1);
        idx++;
        if (idx > str.length) {
          that.intro = "";
          idx = 0;
        }
        setTimeout(fn, 150);
      }, 100);
    },
    //变颜色效果
    changeColor() {
      setInterval(() => {
        this.color =
          "rgb(" +
          Math.floor(Math.random() * 255) +
          "," +
          Math.floor(Math.random() * 255) +
          "," +
          Math.floor(Math.random() * 255) +
          ")";
      }, 1000);
    },
  },
  mounted() {
    this.walking();
    this.changeColor();
  },
};
</script>